<template>
  <div class="mall-page">
    <div class="points-card">
      <div class="points-item">
        <div class="points-value">{{ userPoints }}</div>
        <div class="points-label"> {{ t('mall_available') }} <img src="@/assets/images/vipimg/score.png" alt="" srcset=""></div>
      </div>
      <div class="points-item">
        <div class="points-value">{{ totalPoints }}</div>
        <div class="points-label">{{ t('mall_totalHistory') }} <img src="@/assets/images/vipimg/score.png" alt="" srcset=""></div>
      </div>
    </div>

    <div class="record-section">
      <div class="section-title">
        <van-icon name="orders-o" /> {{ t('mall_record') }}
      </div>
      
      <div class="record-list">
        <div v-for="record in pointsRecords" :key="record.id" class="record-item">
          <div class="record-info">
            <div class="record-icon">
              <img src="@/assets/images/vipimg/icn3.png" alt="" srcset="">
            </div>
            <div class="record-details">
              <div class="record-type">{{ record.type }}</div>
              <div class="record-date">{{ record.date }}</div>
            </div>
          </div>
          <div class="record-points" :class="{ 'points-add': record.points > 0 }">
            {{ record.points > 0 ? '+' : '' }}{{ record.points }} <img src="@/assets/images/vipimg/score.png" alt="" srcset="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const { t } = useI18n()
const router = useRouter()
const userPoints = ref(6)
const totalPoints = ref(6)
const pointsRecords = ref([
  {
    id: '1',
    type: 'Deposit',
    date: '19/04/2025 10:11',
    points: 6,
    icon: 'icon-deposit'
  }
])

onMounted(() => {
  getUserPoints()
  getPointsRecords()
})

function getUserPoints() {
  // 模拟获取用户积分数据
  userPoints.value = 6
  totalPoints.value = 6
}

function getPointsRecords() {
  // 模拟获取积分记录
  // 这里保留已有数据
}
</script>

<style lang="less" scoped>
.mall-page {
  padding: 16px;
  background: url('@/assets/images/user/topBg.png') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
  color: #fff;
}

.points-card {
  display: flex;
  justify-content: space-between;
  background-color: rgba(254, 242, 230, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.points-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.points-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.points-label {
  font-size: 14px;
  color: #aaa;
  display: flex;
  align-items: center;
  
  img {
    width: 14px;
    height: 14px;
    margin-left: 4px;
  }
}

.section-title {
  display: flex;
  align-items: center;
  margin: 20px 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: #ddd;
  
  .van-icon {
    margin-right: 6px;
    font-size: 20px;
  }
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(254, 242, 230, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
}

.record-info {
  display: flex;
  align-items: center;
}

.record-icon {
  width: 60px;
  height: 60px;
  background-color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  overflow: hidden;
  
  img {
    width: 70px;
    height: 70px;
    margin-top: 10px;
  }
}

.record-details {
  display: flex;
  flex-direction: column;
}

.record-type {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.record-date {
  font-size: 12px;
  color: #888;
}

.record-points {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  
  &.points-add {
    color: #4caf50;
  }
  
  img {
    width: 14px;
    height: 14px;
    margin-left: 4px;
  }
}

.icon-deposit {
  position: relative;
  &:before {
    content: "🔒";
  }
}

.icon-note {
  position: relative;
  &:before {
    content: "��";
  }
}
</style>
